<template>
  <div class="home">
    <!-- 头部 -->
    <van-nav-bar class="page-nav-bar">
      <van-icon class="icon" slot="left" name="wap-nav" @click="childShow" />
      <van-button
        class="search-btn"
        slot="title"
        type="info"
        size="small"
        round
        icon="search"
        to="/SongSearch"
      >
        搜索
      </van-button>
      <van-icon class="icon" slot="right" name="music" />
    </van-nav-bar>
    <!-- 头部结束 -->
    <!--账号弹层
     -->
    <account-number :show.sync="show" @upshow="gai" @dingshow="ding" />
    <!-- 设置弹层 -->
    <set-up :setupShow.sync="setupShow" @guanbi="guan"></set-up>
    <!-- 定时关闭弹层 -->
    <van-popup v-model="dingshow" class="dingpop">
      <h5>定时关闭</h5>
      <div v-for="(item, index) in time" :key="index" @click="su(index)">
        <span>{{ item }}</span>
        <span class="no" :class="{ su: active == index }"
          ><van-icon name="success"
        /></span>
      </div>
    </van-popup>
    <!-- 轮播图 -->
    <van-swipe :autoplay="3000" class="banner">
      <van-swipe-item v-for="(image, index) in images" :key="index">
        <img :src="image.pic" />
      </van-swipe-item>
    </van-swipe>
    <!-- 轮播图结束 -->
    <!-- 导航 -->
    <van-row type="flex" justify="space-between">
      <van-col span="6" class="wai" type="flex"
        ><div class="daohang">
          <van-icon name="award" class="daohang-icon" />
        </div>
        <div>每日推荐</div>
      </van-col>
      <van-col span="6" class="wai" @click="gedan"
        ><div class="daohang">
          <van-icon name="star" class="daohang-icon" />
        </div>
        <div>歌单</div>
      </van-col>
      <van-col span="6" class="wai" @click="zhuan"
        ><div class="daohang">
          <van-icon name="fire" class="daohang-icon" />
        </div>
        <div>排行榜</div>
      </van-col>
      <van-col span="6" class="wai"
        ><div class="daohang">
          <van-icon name="award" class="daohang-icon" />
        </div>
        <div>每日推荐</div>
      </van-col>
    </van-row>
    <!-- 导航结束 -->
    <!-- 推荐歌单 -->
    <div class="recommend">
      <div class="title">推荐歌单</div>
      <van-row type="flex" justify="space-between">
        <van-col
          span="8"
          class="tuijian"
          v-for="(item, index) in songList"
          :key="index"
          @click="clickCol(item)"
        >
          <div class="tuijian-img">
            <span class="zongshu">{{ item.playCount | moneyFormat }}</span>
            <img :src="item.picUrl" />
          </div>
          <div class="tuijian-text">
            {{ item.name }}
          </div>
        </van-col>
      </van-row>
    </div>
    <!-- 推荐歌单结束 -->
    <!-- 新歌尝鲜 -->
    <div class="recommend newsong">
      <div class="title">新歌尝鲜</div>
      <van-tabs class="ai" v-model="num" swipeable line-width="0">
        <van-tab v-for="index in 2" :key="index">
          <new-song :index="num" />
        </van-tab>
      </van-tabs>
    </div>
    <!-- 新歌结束 -->
    <!-- 歌单详细 -->
    <list-components
      :ListComponentsShow.sync="ListComponentsShow"
      :id="id"
    ></list-components>
  </div>
</template>

<script>
import { GetcarouselMap, GetRecommend } from '@/api/home'
import { moneyFormat } from '@/filters'
import AccountNumber from './commponent/AccountNumber'
import NewSong from './commponent/NewSong'
import setUp from './commponent/SetUp'
export default {
  data () {
    return {
      images: [],
      limit: 6,
      songList: [],
      newList: [],
      show: false,
      time: [
        '不开启',
        '10分钟',
        '20分钟',
        '30分钟',
        '60分钟',
        '90分钟',
        '自定义'
      ],
      num: 0,
      setupShow: false,
      dingshow: false,
      active: 0,
      id: 0,
      ListComponentsShow: false
    }
  },
  filters: {
    moneyFormat
  },
  components: {
    AccountNumber,
    NewSong,
    setUp
  },
  created () {
    this.GetcarouselMap()
    this.GetRecommend()
  },
  mounted () {},
  methods: {
    async GetcarouselMap () {
      const { banners } = await GetcarouselMap()
      this.images.push(...banners)
    },
    async GetRecommend () {
      const { result } = await GetRecommend(this.limit)
      this.songList.push(...result)
      console.log(result)
    },
    childShow () {
      this.show = true
    },
    zhuan () {
      this.$router.push('/RankingList')
    },
    gai (data) {
      this.setupShow = data
      console.log(this.setupShow)
    },
    guan (data) {
      this.setupShow = data
      this.show = data
    },
    ding (data) {
      this.dingshow = data
    },
    su (index) {
      this.active = index
    },
    clickCol (item) {
      this.id = item.id
      this.ListComponentsShow = true
    },
    gedan () {
      this.$router.push('/SongSheet')
    }
  }
}
</script>

<style scoped lang="less">
.home {
  /deep/ .page-nav-bar {
    width: 100vw;
    background: #e4463b;
  }
  /deep/ .icon {
    font-size: 45px;
    color: white;
  }
  .search-btn {
    width: 450px;
    height: 64px;
    background-color: white;
    border: none;
    font-size: 28px;
    color: #333;
    .van-icon {
      color: #333;
      font-size: 32px;
    }
  }
  // 轮播图
  .banner {
    height: 270px;
    width: 98vw;
    padding: 10px;
    img {
      border-radius: 10px;
      width: 98%;
      height: 100%;
    }
  }
  // 导航
  .wai {
    text-align: center;
    padding: 10px;
    .daohang {
      width: 96px;
      height: 96px;
      margin: 0 auto;
      background: #e4463b;
      border-radius: 50%;
      text-align: center;
      .daohang-icon {
        color: white;
        line-height: 96px;
        font-size: 60px;
      }
    }
    div {
      font-size: 24px;
    }
  }
  .title {
    font-weight: 600;
    font-size: 32px;
    margin-bottom: 15px;
  }
  .dingpop {
    padding: 20px;
    width: 580px;
    h5 {
      margin: 10px;
    }
    div {
      font-size: 30px;
      padding: 20px;
      .no {
        display: none;
      }
      .su {
        display: inline;
        color: red;
        margin-left: 400px;
      }
    }
  }
  // 推荐歌单
  .recommend {
    padding: 15px;
    .tuijian {
      width: 230px;
      height: 312px;
      .tuijian-img {
        width: 230px;
        height: 230px;
        position: relative;
        img {
          border-radius: 20px;
          width: 100%;
          height: 100%;
        }
        .zongshu {
          position: absolute;
          padding: 5px;
          right: 5px;
          top: 5px;
          background: rgba(255, 255, 255, 0.5);
          font-size: 18px;
          border-radius: 8px;
        }
      }
      .tuijian-text {
        font-size: 24px;
        overflow: hidden;
        -webkit-line-clamp: 2;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
      }
    }
  }
  .newsong {
    margin-bottom: 80px;
    /deep/ .ai {
      .van-tabs__wrap {
        height: 0 !important;
      }
    }
  }
}
</style>
